<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {
			      margin: 0;
			      padding: 0;
			      box-sizing: border-box;
			      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
			    }
			:root {
				  --primary-color: #3b82f6; /* 主色调-蓝色 */
				  --secondary-color: #10b981; /* 辅助色-绿色 */
				  --warning-color: #f59e0b; /* 警告色-黄色 */
				  --danger-color: #ef4444; /* 危险色-红色 */
				  --gray-light: #f3f4f6;
				  --gray-medium: #e5e7eb;
				  --gray-dark: #4b5563;
				  --shadow-sm: 0 2px 4px rgba(0,0,0,0.05);
				  --shadow-md: 0 4px 6px rgba(0,0,0,0.05);
				  --radius: 0.625rem;
				  --transition: all 0.3s ease;
				}
			#navbar{
				position: fixed;
				top: 0;
				left: 0;
				right: 0;
				background:white;
				border-bottom:1px solid var(--gray-medium) ;
				height: 64px;
				display: flex;
				align-items: center;
				justify-content: space-between;
				box-shadow:var(--shadow-sm);
				padding: 0 2em;
				z-index: 100;
			}
			.n1 span{
				font-size: 20px;
				font-weight: 600;
				color: var(--primary-color);
			}
			.nav-menu{
				margin: 0 2em;
			}
			.nav-menu ul{
				display: flex;
				list-style: none;
				gap: 28px;
			}
			.nav-menu a{
				text-decoration: none;
				color: var(--gray-dark);
				font-size: 16px;
				padding: 8px 0;
				position: relative;
				transition:var(--transition);
			}
			.nav-menu a:hover{
			    color: var(--primary-color);
			}
			.nav-menu a::after{
			    content: '';
			    position: absolute;
			    width: 0;
			    height: 2px;
			    bottom: 0;
			    left: 0;
			    background-color: var(--primary-color);
			    transition: var(--transition);
			}
			.nav-menu a:hover::after{
			    width: 100%;
			}
			.nav-menu a.active{
			    color: var(--primary-color);
			}
			.nav-menu a.active::after{
			    width: 100%;
			}
			.n1{
				display: flex;
				gap: 10px;
				align-items: center;
			}
			
			.right-actions{
				display: flex;
				align-items: center;
				gap: 24px;
			}
			.notification-btn{
				position: relative;
				background: none;
				border: none;
				font-size: 20px;
				color: var(--gray-dark);
				cursor: pointer;
				transition: var(--transition);
				width: 36px;
				height: 36px;
				border-radius: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
			}
			.notification-btn:hover{
				color: var(--danger-color);
				background-color: var(--gray-light);
			}
			.notification-badge{
			    position: absolute;
			    top: 2px;
			    right: 2px;
			    background-color: var(--danger-color);
			    color: white;
			    font-size: 10px;
			    width: 16px;
			    height: 16px;
			    border-radius: 50%;
			    display: flex;
			    align-items: center;
			    justify-content: center;
			}
			.user-info{
				display: flex;
				align-items: center;
				gap: 10px;
				cursor: pointer;
				padding: 4px 8px;
				border-radius: 20px;
				transition: var(--transition);
			}
			.user-info:hover{
			    background-color: var(--gray-light);
			}
			.user-name{
				font-size: 15px;
				
			}
			.user-image{
			    width: 36px;
			    height: 36px;
			    border-radius: 50%;
			    background-color: var(--primary-color);
			    color: white;
			    display: flex;
			    align-items: center;
			    justify-content: center;
			    font-weight: 600;
			}
			section h1{
				font-size: clamp(1.5rem,3vw,2.5rem);
				font-weight: 700;
				color: #111827;
				margin-bottom: 0.5rem;
			}
			.welcome-date-text{
			    font-size: 1rem;
			    color: var(--gray-dark);
			    margin-bottom: 2rem;
			}
			.main{
				padding-top: 5rem;
				padding-bottom: 4rem;
				background-color: #f9fafb;
				min-height: 100vh;
			}
			
			.section2{
				display: flex;
				justify-content:space-between ;
				margin-bottom: 2rem;
				flex-wrap: wrap;/* 控制弹性容器内的子元素在空间不足时是否换行。 */
				gap: 1rem;
			}
			.card{
				flex: 1;
				min-width: 250px;
				height: 10rem;
				box-shadow: var(--shadow-md);
				padding: 24px;
				background-color: white;
				border-radius: var(--radius);
				transition: var(--transition);
				border-top: 4px solid transparent;
			}
			.card:hover{
			    transform: translateY(-5px);
			    box-shadow: 0 10px 15px rgba(0,0,0,0.07);
			}
			.card:nth-child(1){
			    border-top-color: var(--primary-color);
			}
			.card:nth-child(2){
			    border-top-color: var(--danger-color);
			}
			.card:nth-child(3){
			    border-top-color: var(--secondary-color);
			}
			.card:nth-child(4){
			    border-top-color: var(--warning-color);
			}
			.main-div{
				padding: 1rem;
				margin: 0 3.75rem;
				max-width: 1400px;
				margin-left: auto;
				margin-right: auto;
			}
				
			.card-content{
				display: flex;
				justify-content: space-between;
				align-items: flex-start;
				height: 100%;
			}
			.card-icon{
			    width: 48px;
			    height: 48px;
			    border-radius: 12px;
			    display: flex;
			    align-items: center;
			    justify-content: center;
			    font-size: 24px;
			    color: white;
			}
			.card:nth-child(1) .card-icon{
			    background-color: rgba(59, 130, 246, 0.1);
			    color: var(--primary-color);
			}
			.card:nth-child(2) .card-icon{
			    background-color: rgba(239, 68, 68, 0.1);
			    color: var(--danger-color);
			}
			.card:nth-child(3) .card-icon{
			    background-color: rgba(16, 185, 129, 0.1);
			    color: var(--secondary-color);
			}
			.card:nth-child(4) .card-icon{
			    background-color: rgba(245, 158, 11, 0.1);
			    color: var(--warning-color);
			}
			
			.card-stats p:first-child{
			    color: var(--gray-dark);
			    font-size: 14px;
			    margin-bottom: 0.5rem;
			}
			.card-stats h3{
			    font-size: 24px;
			    margin-bottom: 0.5rem;
			    color: #111827;
			}
			.card-stats p:last-child{
			    font-size: 14px;
			    display: flex;
			    align-items: center;
			    gap: 4px;
			}
			.positive{
			    color: var(--secondary-color);
			}
			.negative{
			    color: var(--danger-color);
			}
			
			.card2{
				 display: grid;
				 grid-template-columns: repeat(12, 1fr);
				 gap: 2rem;
				 margin-bottom: 3rem;
			}
			.card-content2-left{
				grid-column: span 8;
			}
			.card-content2-right{
				grid-column: span 4;
			}
			.card-content2-left1, .card-content2-right1{
			            background-color: white;
			            border-radius: var(--radius);
			            box-shadow: var(--shadow-md);
			            padding: 1.5rem;
			            margin-bottom: 2rem;
			            transition: var(--transition);
			        }
			.card-content2-left1:hover, .card-content2-right1:hover{
			    box-shadow: 0 10px 15px rgba(0,0,0,0.07);
			}	
			.footer1{
				width: 100%;
				height: auto;
				border-top: 1px solid var(--gray-medium);
				background-color: white;
				padding: 2rem 0;
			}
			.footer2{
				display: flex;
				justify-content:space-between ;
				align-items: center;
				max-width: 1400px;
				margin: 0 auto;
				padding: 0 3.75rem;
				flex-wrap: wrap;
				gap: 1rem;
			}
			.footer-left p{
			    color: var(--gray-dark);
			    font-size: 14px;
			}
			.footer-right{
			    display: flex;
			    gap: 1.5rem;
			}
			.footer-right a{
			    color: var(--gray-dark);
			    text-decoration: none;
			    font-size: 14px;
			    transition: var(--transition);
			}
			.footer-right a:hover{
			    color: var(--primary-color);
			}
			@media (max-width: 1024px) {
			    .card2{
			        grid-template-columns: 1fr;
			    }
			    .card-content2-left, .card-content2-right{
			        grid-column: span 12;
			    }
			}
			@media (max-width: 768px) {
			    .main-div, .footer2{
			        margin: 0 1rem;
			        padding: 0 0.5rem;
			    }
			    .nav-menu{
			        display: none;
			    }
			    .section2{
			        flex-direction: column;
			    }
			    .card{
			        width: 100%;
			    }
			}
		</style>
	</head>
	<body>
	  <header id="navbar">
	  	<div class="n1">
			<div class="n1-logo">
				<img src="边牧.png" width="40px"alt="Logo">
			</div>
	  		<span>生活管理系统</span>
	  	</div>
		<nav class="nav-menu">
			<ul>
				<li><a href="#"class="active">仪表盘</a></li>
				<li><a href="#">日程管理</a></li>
				<li><a href="#">财务管理</a></li>
				<li><a href="#">健康记录</a></li>
				<li><a href="#">待办事项</a></li>
			</ul>
		</nav>
		
		<div class="right-actions">
		      <!-- 通知按钮 -->
		      <button class="notification-btn">
		        🔔
		        <span class="notification-badge">3</span>
		      </button>
		
		      <!-- 用户信息 -->
		      <div class="user-info">
		        <div class="user-image">U</div>
		        <span class="user-name">用户名</span>
		      </div>
		    </div>
	  </header>
	  <main class="main">
		  <div class="main-div">
		  	
		  
		 <section>
			 <h1>欢迎你，XXX</h1>
			 <p class="welcome-date-text">今天是<span id="current-date"></span>让我们开启愉快的一天</p>
		 </section>
		 
		 <section class="section2">
			 <div class="card">
			 	<div class="card-content">
			 		<div class="card-stats">
			 			<p >待办事项</p>
						<h3 >8 <span>/12</span></h3>
						<p class="positive">完成率 67%</p>
			 		</div>
					<div class="card-icon">
						ab
					</div>
			 	</div>
			 </div>
			 <div class="card">
			 	<div class="card-content">
			 		<div class="card-stats">
			 			<p >今日支出</p>
			 			<h3 >￥<span>248</span></h3>
			 			<p class="negative">较昨日 12%</p>
			 		</div>
			 		<div class="card-icon">
			 			ab
			 		</div>
			 	</div>
			 </div>
			 <div class="card">
			 	<div class="card-content">
			 		<div class="card-stats">
			 			<p >今日步数</p>
			 			<h3>5632<span></span></h3>
			 			<p class="positive">目标 70%</p>
			 				</div>
			 		<div class="card-icon">
			 			ab
			 		</div>
			 	</div>
			 </div>
			 <div class="card">
			 	<div class="card-content">
			 		<div class="card-stats">
			 			<p >今日里程</p>
			 			<h3 >4 <span></span></h3>
			 			<p class="positive">下一个</p>
			 				 </div>
			 		<div class="card-icon">
			 			ab
			 		</div>
			 	</div>
			 </div>
		 </section>
		 
		 <div class="card2">
		 	<div class="card-content2-left">
		 		<div class="card-content2-left1">
		 			卡片一
		 		</div>
				<div class="card-content2-left1">
					卡片二
				</div>
		 	</div>
			<div class="card-content2-right">
				<div class="card-content2-right1">
					卡片一
				</div>
				<div class="card-content2-right1">
					卡片二
				</div>
				<div class="card-content2-right1">
					卡片三
				</div>
			</div>
			
		 </div>
		 </div>
		 
	  </main>
	  
	  <footer>
		  <div class="footer1">
		  	<div class="footer2">
		  		<div class="footer-left">
		  			<p>© 2023 生活管理系统. 保留所有权利.</p>
		  		</div>
				<div class="footer-right">
					<a href="#">帮助中心</a>
					<a href="#">隐私政策</a>
					<a href="#">使用条款</a>
				</div>
		  	</div>
		  </div>
	  </footer>
	  <script>
	          // 设置当前日期
	          const dateOptions = { year: 'numeric', month: 'long', day: 'numeric', weekday: 'long' };
	          const currentDate = new Date().toLocaleDateString('zh-CN', dateOptions);
	          document.getElementById('current-date').textContent = currentDate;
	      </script>
	  
	</body>
	
</html>